<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  	<!-- css设置 -->
  	<!-- <style type="text/css">
  		.btn{
  			width: 100%;
  			height: 100%;
  			font-weight: bold;
  			font-size: 20;
  		}
  		
  		.textview{
  			width: 100%;
  			height: 100%;
  			font-weight: bold;
  			font-size: 20;
  		}
  		
  		
  		.btn:HOVER{
  			background: #0000dd;
  		}
  		
  		#calculator{
  			font-size：黑体;
            margin: auto;
            border: solid 1px #000000;
            height: 400px;
            width: 300px;
            text-align: center;
    }
  	</style> -->
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<link rel="stylesheet" type="text/css" href="<%=basePath%>/style.css">
  </head>
 
  <body>
  	<form action="<%=basePath%>/servlet/Aservlet" method="post">
  		<h1 style="text-align: center">计算器</h1>
  		<table id="calculator" >
  			<tr><td colspan="4"><input type="text" readonly="readonly"
  			id="textview" class="textview" value=<%=request.getAttribute("result")%> name="count"></td></tr>
  			<tr>
  					<td><input type="button" value="C" class="btn">
  					<td><input type="button" value="+" class="btn">
  					<td><input type="button" value="-" class="btn">
  					<td><input type="button" value="/" class="btn">
  			</tr>
  			
  			<tr>
  					<td><input type="button" value="1" class="btn">
  					<td><input type="button" value="2" class="btn">
  					<td><input type="button" value="3" class="btn">
  					<td><input type="button" value="*" class="btn">
  			</tr>
  			
  			<tr>
  					<td><input type="button" value="4" class="btn">
  					<td><input type="button" value="5" class="btn">
  					<td><input type="button" value="6" class="btn">
  					<td rowspan="3"><input type="submit" value="=" class="btn">
  			</tr>
  			
  			<tr>
  					<td><input type="button" value="7" class="btn">
  					<td><input type="button" value="8" class="btn">
  					<td><input type="button" value="9" class="btn">
  			</tr>
  			
  			<tr>
  					<td  colspan="2"><input type="button" value="0" class="btn">
  					<td><input type="button" value="." class="btn">
  			</tr>
  		</table>
  	</form>
  	
  	<script type="text/javascript">
  		var table= document.getElementById("calculator");
  		var textview= document.getElementById("textview");
  		window.onload=function ifnull(){
  			if(textview.value=="null"){
  				textview.value=0;
  			}
  		}
  		table.onclick=function(e){
  			/* 获取class的value */
  			console.log(e.srcElement.classList.value);
  			/* console.log(e.srcElement.value); */
  			/* console.log(e.srcElement.type==button); */
  			var number=e.srcElement.value;
  			/* textvalue =textview.value; */
  			var result="=";
  			var clear="C";
  			var reg=/^[0-9]*$/ ;
  			/* var reg=new RegExp("+-."); */
  			/* console.log(textvalue.substr(-1)); */
  				/*判断是否点击=  */
  			if(e.srcElement.classList.value=="btn"){
  				
	  	    	if(number!=result){
	  	    		/*判断是否点击C  */
	  	    		if(number!=clear){
	  	    			/* 判断显示框是否为0 */
	  	    			 if(textview.value==0){
	  	    				 /* 判断点击的按钮是否为数字按钮 */
	  	    				 if(reg.test(number)){
	  	    					/* console.log(number); */
	  	    					textview.value=number;
	  	    				 }else{
	  	    					textview.value=0;
	  	    				 }
	  	    			/* 显示框不为0 */
	  	    			 }else if(textview.value!=0){
	  	    				 if(reg.test(number)){
	  	    					textview.value+=number;
	  	    				 }else{
	  	    					 /* 点击不为数字 */
	  	    					 if(reg.test(textview.value.substr(-1))){
	  	    						 /* 显示框最后一位数为数字 */
	  	    						textview.value+=number;
	  	    					 }else{
	  	    						textview.value=textview.value.replace(textview.value.substr(-1),number);
	  	    					 }
	  	    				 }
	  	    			 }
	  	    		}else{
	  	    			/* 清空 */
	  	    			textview.value=0;
	  	    		}
	  	    	}else{
	  	    		/* 输出结果 */
	  	    		/* console.log(eval(textview.value)); */
	  	    		/* if(reg.test(textview.value.substr(-1))){
	  	    			textview.value=eval(textview.value);
	  	    		}else{
	  	    			textview.value=textview.value.substring(0,textview.value.length-1);
	  	    			textview.value=eval(textview.value);
	  	    		} */
	  	    	}
  			}
  			
  		};
  		
  		
  	</script>
  </body>
</html>
